
<template>
    <div class="app-container">
      <search-header
        v-show="boo.showSearch"
        :select-prop="selectProp"
        @search-action="searchAction"
      ></search-header>

      <div class="app-permission-container flex-between mb8">
        <span class="page-list-title">人员列表</span>
        <div class="action-content">
          <el-button type="primary" v-hasPermi="['admin:acddRole:add']" size="mini" @click="showDialog('staff', 'add')"
          >新增</el-button>
        </div>
      </div>
      <div class="app-table-container">
        <el-table
          v-loading="boo.loading"
          :data="list" border header-row-class-name="app-table-list"
        >
          <el-table-column
            label="姓名"
            align="center"
            key="nickName"
            prop="nickName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="登录账号（手机号）"
            align="center"
            key="userName"
            prop="userName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="创建时间"
            align="center"
            key="createTime"
            prop="createTime"
            width="120"
          />
          <el-table-column
            label="状态"
            align="center"
            key="status"
            prop="status"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="{row}">
              <el-tag :type="row.status == '1' ? 'danger' : 'success'">{{row.status | numToStr(selectProp.selectList, 'status')}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="240"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{row}">
              <el-button
                size="mini"
                type="text" :loading="row.isEdit"
                icon="el-icon-edit" v-hasPermi="['admin:acddRole:edit']"
                @click="showDialog('staff', 'edit', row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="text" :loading="row.isControl"
                icon="el-icon-delete" v-hasPermi="['admin:acddRole:editStatus']"
                @click="controlRow(row)"
                >{{row.status == '1' ? '启用' : '停用'}}</el-button
              >
              <el-button
                size="mini"
                type="text" v-hasPermi="['admin:acddRole:remove']"
                icon="el-icon-delete"
                @click="deleteRow(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="other.total > 0"
          :total="other.total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <!-- 人员弹窗 -->
      <staff-dialog ref="staff-dialog" v-model="currentItem" @submit="submitDialog"/>
    </div>
  </template>
  
  <script>
  import {
    getRoleList, delRole, contrlRole
  } from "@/api/userManage/admin-staff.js";
  export default {
    name: "List",
    components: {
      "search-header": () => import("@/rhComponents/searchHeader/index"),
      "staff-dialog": () => import("./temp/staff-dialog"),
    },
    filters: {
      numToStr(num, list, type){
        let index = list.findIndex(item => item.name == type)
        if(index == -1) return '未定义参数'
        let idx = list[index].child.findIndex(i => i.dictValue == num)
        if(idx == -1) return '---'
        return list[index].child[idx].dictLabel
      }
    },
    data() {
      return {
        selectProp: JSON.parse(JSON.stringify(this.$getSearchHeader(this))),
        boo: {
          loading: false, // 遮罩层
          multiple: true, // 非多个禁用
          showSearch: true, // 显示搜索条件
        },
        other: {
          total: 0, //总条数
        },
        dictsList: [], //字典列表
        // 地块列表
        list: [],
        currentItem: {},
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        }
      };
    },
    mounted(){
      let _self = this
      _self.initGetDicts().then(res => {
        _self.getList()
      })
    },
    methods: {
      // 搜索条件查询
      searchAction(prop) {
        this.queryParams = Object.assign(this.queryParams, prop["params"]);
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 查询用户列表 */
      getList() {
        this.boo.loading = true;
        getRoleList(this.queryParams)
          .then((response) => {
            this.list = response.rows;
            this.other.total = response.total;
            this.boo.loading = false;
          })
          .catch(() => {});
      },
      async controlRow(row){
        let _self = this
        _self.$set(row, 'isControl', true)
        let params = {
          userId: row.userId,
          status: row.status == 1 ? '0' : '1'
        }
        await contrlRole(params).then(res => {
          _self.$message.success('操作成功')
        _self.$set(row, 'status', params.status)
        })
        _self.$set(row, 'isControl', false)
      },
      /** 删除按钮操作 */
      deleteRow(row) {
        this.$modal
          .confirm('是否确认删除？')
          .then(function () {
            return delRole(row.userId);
          })
          .then(() => {
            this.queryParams.pageNum = 1
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
      showDialog(ref, type, row) {
        let _self = this, vm = this.$refs['staff-dialog'];
        _self.$nextTick(() => {
          vm.showDialog(ref, `${type}`, row)
        })
      },
      submitDialog(action) {
        let _self = this;
        if(action == 'add'){
          _self.queryParams.pageNum = 1
        }
        _self.getList()
      },
    }
  };
  </script>
  <style scoped lang="scss">
  </style>